<template>
  <v-main style="overflow: hidden;height: 100px">
    <v-img src="../assets/img/backpic.jpg">
      <v-card flat height="100%" style="background-color: rgba(0,0,0,0.3)">
        <v-list-item>
          <v-list-item-content>
            <v-list-item-title
              v-model="updateTime"
              class="headline white--text font-weight-black"
              style="opacity: 1"
            >更新时间：{{updateTime}}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>

        <v-card-text>
          <v-row align="center">
            <v-col class="display-3 white--text font-weight-black" v-model="condition">{{condition}}</v-col>
            <v-col class="display-3 white--text font-weight-black" v-model="temp">{{temp}}&deg;C</v-col>
            <v-col>
              <v-img
                v-model="icon"
                :src="(require('@/assets/weather_icon/W'+icon+'.png'))"
                width="92"
              ></v-img>
            </v-col>
          </v-row>
        </v-card-text>

        <v-list-item class="mt-10">
          <v-list-item-icon>
            <v-icon color="white">mdi-weather-windy</v-icon>
          </v-list-item-icon>
          <v-list-item-subtitle
            class="white--text font-weight-black headline"
            v-model="windDir"
          >{{windDir}}</v-list-item-subtitle>
          <v-list-item-subtitle
            class="white--text font-weight-black headline"
            v-model="windLevel"
          >{{windLevel}}级</v-list-item-subtitle>
        </v-list-item>

        <v-list-item>
          <v-list-item-icon>
            <v-icon color="white">mdi-water-percent</v-icon>
          </v-list-item-icon>
          <v-list-item-subtitle
            class="white--text font-weight-black headline"
            v-model="humidity"
          >{{humidity}}%</v-list-item-subtitle>
        </v-list-item>
      </v-card>
    </v-img>
  </v-main>
</template>

<script>
import BackToTop from "./BackToTop.vue";
import cities from "../assets/json/city";
import qs from "qs";

export default {
  name: "WeatherContent",
  components: {
    BackToTop
  },
  data() {
    return {
      updateTime: "",
      weatherInfo: {},
      temp: 0,
      condition: "",
      icon: 0,
      humidity: "",
      windDir: "",
      windLevel: 0
    };
  },
  methods: {
    getWeather: function(cityId) {
      let data = { cityId: cityId };
      let config = {
        url:
          "http://freecityid.market.alicloudapi.com/whapi/json/alicityweather/briefcondition",
        method: "post",
        data: qs.stringify(data),
        headers: {
          Authorization: "APPCODE <请填写你自己的APPCODE>"
        }
      };
      let jeremy = this;
      this.axios(config)
        .then(function(res) {
          if (res) {
            jeremy.temp = res.data.data.condition.temp;
            jeremy.condition = res.data.data.condition.condition;
            jeremy.icon = res.data.data.condition.icon;
            jeremy.humidity = res.data.data.condition.humidity;
            jeremy.windDir = res.data.data.condition.windDir;
            jeremy.windLevel = res.data.data.condition.windLevel;
            jeremy.updateTime = res.data.data.condition.updatetime.substring(
              11
            );
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    weatherImgSrc: function(iconNum) {
      return "src/assets/weather_icon/W" + iconNum + ".png";
    }
  },
  mounted() {
    let localCity = localStorage.city;
    if (localCity !== undefined) {
      this.$store.commit("changeCity", localCity);
    } else {
      this.$store.commit("changeCity", "上海市");
    }
    let cityName = this.$store.state.city;
    let cityID = 19960529;
    for (let i = 0; i < cities.length; i++) {
      if (cities[i].name === cityName) {
        cityID = cities[i].cityID;
        break;
      }
    }
    this.getWeather(cityID);
  },
  computed: {
    iconSrc: function() {
      return this.weatherImgSrc(this.icon);
    }
  }
};
</script>
